<template>
  <div class="hosts_container">
    <el-table
      v-loading="loading"
      element-loading-text="正在加载中"
      :data="databaseList"
      style="width: 99%"
      stripe
    >
      <el-table-column label="序号" width="80" type="index" align="center" />

      <el-table-column label="数据库名" width="180" align="center">
        <template slot-scope="scope">
          <el-popover trigger="hover" placement="top">
            <p>主机名: {{ scope.row.ip }}</p>
            <p>数据库: {{ scope.row.dbName }}</p>
            <div slot="reference" class="name-wrapper">
              <el-tag size="medium">{{ scope.row.dbName }}</el-tag>
            </div>
          </el-popover>
        </template>
      </el-table-column>

      <el-table-column label="IP" width="140" align="center" prop="ip" />

      <el-table-column label="端口" width="140" align="center" prop="port" />

      <el-table-column label="类型" width="180" align="center" prop="dbType" />

      <el-table-column label="数据库用户名" width="120" prop="user" />

      <el-table-column label="连接情况" width="120">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.dbState == '2'">异常</el-tag>
          <el-tag v-if="scope.row.dbState == '1'">正常</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="链接名字" width="150" prop="aliasName" />

      <el-table-column label="更新日期" width="250">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span style="margin-left: 10px">{{ formatDate(scope.row.updateTime) }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建日期" width="250">
        <template slot-scope="scope">
          <i class="el-icon-time" />
          <span style="margin-left: 10px">{{ formatDate(scope.row.createTime) }}</span>
        </template>
      </el-table-column>

      <!-- <el-table-column label="操作" align="center" min-width="150" fixed="right">
        <template slot-scope="scope">
          <el-button
            v-permission="'duty:modify'"
            size="mini"
            type="primary"
            round
            plain
            @click="handleMore(scope.row)"
          >测试链接</el-button>
        </template>
      </el-table-column> -->
      <template v-slot:empty>
        <div style="height: 200px;">
          <img src="../../assets/nodata.png" width="150" style="margin: 30px;">
        </div>
      </template>
    </el-table>
  </div>
</template>

<script>
import { getDatabase, validateDatabase } from '@/api/db'
import { formatDate } from '@/utils/index.js'
export default {
  data() {
    return {
      databaseList: [],
      loading: true

    }
  },
  mounted() {
    this.getDatabase()
  },
  methods: {
    formatDate,
    async getDatabase() {
      const res = await getDatabase()
      this.databaseList = res
      this.loading = false
    }
    // async handleMore(row) {
    //   console.log(row)
    //   const res = await validateDatabase(row)
    //   console.log(res)
    // }
  }
}
</script>
<style scoped></style>
